<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores'
import { updateUser } from '@/api/user'

// 用户信息表单数据
const userForm = ref({
  password: '',
  repassword: '',
  nickname: '',
  phone: '',
  email: ''
})

// 表单引用
const formRef = ref(null)

// 表单校验规则
const rules = {
  password: [{ min: 6, message: '密码长度至少为6位', trigger: 'blur' }],
  repassword: [
    {
      validator: (rule, value, callback) => {
        if (value !== userForm.value.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  email: [{ type: 'email', message: '邮箱格式不正确', trigger: 'blur' }]
}

// 计算头像显示的首字母
const avatarInitial = computed(() => {
  return userForm.value.nickname
    ? userForm.value.nickname.charAt(0).toUpperCase()
    : 'U'
})

// 更新用户信息
const updateAllFields = async () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      const payload = {
        password: userForm.value.password || '',
        nickname: userForm.value.nickname || '',
        phone: userForm.value.phone || '',
        email: userForm.value.email || '',
        repassword: userForm.value.repassword || ''
      }
      console.log('发送的数据:', payload) // 调试日志
      console.log(userStore.userInfo)
      const { data } = await updateUser(userStore.userInfo.userId, payload)
      // 更新userStore信息
      userStore.setUserInfo(data)
      ElMessage.success('用户信息更新成功')
    }
  })
}

const userStore = useUserStore()

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    Object.assign(userForm.value, userStore.userInfo)
  } catch (error) {
    ElMessage.error('获取用户信息失败')
  }
}

onMounted(() => {
  fetchUserInfo()
})
</script>

<template>
  <div class="update-user-page">
    <!-- 顶部标题 -->
    <header class="page-header">
      <div class="header-left">
        <h2>用户信息更新详情</h2>
      </div>
    </header>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 表单区 -->
      <section class="form-section">
        <el-card class="form-card" shadow="none">
          <template #header>
            <div class="card-header">
              <span>编辑个人信息</span>
            </div>
          </template>
          <div class="form-container">
            <!-- 头像 -->
            <div class="avatar-section">
              <el-avatar :size="80" class="avatar">
                {{ avatarInitial }}
              </el-avatar>
            </div>

            <!-- 表单 -->
            <el-form
              ref="formRef"
              :model="userForm"
              :rules="rules"
              label-position="left"
              label-width="100px"
              class="user-form"
            >
              <!-- 密码 -->
              <el-form-item label="新密码" prop="password">
                <el-input
                  v-model="userForm.password"
                  type="password"
                  placeholder="请输入新密码"
                  show-password
                  clearable
                />
              </el-form-item>
              <el-form-item label="确认密码" prop="repassword">
                <el-input
                  v-model="userForm.repassword"
                  type="password"
                  placeholder="请再次输入密码"
                  show-password
                  clearable
                />
              </el-form-item>

              <!-- 昵称 -->
              <el-form-item label="昵称" prop="nickname">
                <el-input
                  v-model="userForm.nickname"
                  placeholder="请输入昵称"
                  clearable
                />
              </el-form-item>

              <!-- 手机号 -->
              <el-form-item label="手机号" prop="phone">
                <el-input
                  v-model="userForm.phone"
                  placeholder="请输入手机号"
                  clearable
                />
              </el-form-item>

              <!-- 邮箱 -->
              <el-form-item label="邮箱" prop="email">
                <el-input
                  v-model="userForm.email"
                  placeholder="请输入邮箱"
                  clearable
                />
              </el-form-item>

              <!-- 单一更新按钮 -->
              <el-form-item>
                <div class="form-actions">
                  <el-button type="primary" @click="updateAllFields">
                    更新
                  </el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </section>

      <!-- 提示区 -->
      <section class="tips-section">
        <el-card class="tips-card" shadow="none">
          <template #header>
            <div class="card-header">
              <span>更新提示</span>
            </div>
          </template>
          <div style="padding: 1.6rem">
            <ul class="tips-list">
              <li>密码需至少6位，建议包含字母、数字和符号。</li>
              <li>手机号需为11位大陆号码，以1开头。</li>
              <li>邮箱格式需正确，例如 example@domain.com。</li>
              <li>点击“更新”按钮一次性保存所有更改。</li>
            </ul>
          </div>
        </el-card>
      </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use 'sass:color';
$primary-color: #4834d4; // 主题色

.update-user-page {
  padding: 2.4rem;
  background: linear-gradient(to bottom, #f5f7fa, #eef2f6);
  min-height: 100vh;
  color: #1f2a44;
}

/* 顶部标题 */
.page-header {
  margin-bottom: 2.4rem;

  .header-left {
    display: flex;
    align-items: center;
    gap: 1.6rem;

    h2 {
      font-size: 3rem;
      font-weight: 600;
      color: #1f2a44;
      margin: 0;
    }
  }
}

/* 主内容区 */
.main-content {
  display: flex;
  gap: 2.4rem;
  margin: 0 auto;
}

/* 表单区 */
.form-section {
  flex: 2;

  .form-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

    .card-header {
      font-size: 2rem;
      font-weight: 600;
      padding: 0 1rem;
      // color: $primary-color;
    }

    .form-container {
      display: flex;
      gap: 2rem;
      width: 100%; // 确保容器占满可用宽度
    }

    .avatar-section {
      flex: 0 0 100px;
      text-align: center;

      .avatar {
        background: $primary-color;
        font-size: 3.2rem;
        font-weight: 500;
        transition: transform 0.3s;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .user-form {
      flex: 1;
      width: 100%; // 表单占满剩余空间

      .el-form-item {
        margin-bottom: 2rem;
        display: flex; // 使用 flex 布局让输入框填满空间
        align-items: center;

        :deep(.el-form-item__label) {
          color: #1f2a44;
          font-weight: 500;
          padding-right: 1.6rem;
          flex: 0 0 100px; // 固定标签宽度
          font-size: 1.6rem;
        }

        .el-input {
          flex: 1; // 输入框占满剩余空间
          width: 100%; // 确保输入框宽度自适应
          font-size: 1.6rem;

          .el-input__wrapper {
            border-radius: 8px;
            box-shadow: none;
            transition: border-color 0.3s;

            &:hover {
              border-color: $primary-color;
            }
          }
        }
      }

      .form-actions {
        display: flex;
        justify-content: flex-end;

        .el-button {
          background: linear-gradient(
            135deg,
            $primary-color,
            color.adjust($primary-color, $lightness: 10%)
          );
          border: none;
          border-radius: 8px;
          padding: 1rem 2rem;
          font-weight: 500;
          transition: all 0.3s;
          font-size: 1.6rem;

          &:hover {
            opacity: 0.9;
            transform: scale(1.05);
          }
        }
      }
    }
  }
}

/* 提示区 */
.tips-section {
  flex: 1;

  .tips-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    // padding: 16px;

    .card-header {
      font-size: 2rem;
      font-weight: 600;
      padding: 0 1rem;
      // color: $primary-color;
    }

    .tips-list {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 1.6rem;
      color: #606266;

      li {
        margin-bottom: 12px;
        position: relative;
        padding-left: 20px;

        &:before {
          content: '•';
          color: $primary-color;
          font-size: 18px;
          position: absolute;
          left: 0;
          top: 0;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

/* 响应式设计 */
@media screen and (max-width: 1024px) {
  .main-content {
    flex-direction: column;
  }

  .form-section .user-form .el-form-item .el-input {
    max-width: none;
  }
}

@media screen and (max-width: 768px) {
  .page-header .header-left h2 {
    font-size: 24px;
  }

  .form-section .form-container {
    flex-direction: column;
    align-items: center;
  }

  .form-section .user-form .el-form-item {
    .el-input {
      max-width: none;
    }
  }

  .form-section .form-actions {
    justify-content: center;
  }
}
</style>
